<template>
	<view class="uni-container">
		<uni-forms>
			<uni-forms-item label="logo" name="title" labelWidth="120">
				<uni-file-picker :value="header.logo" :limit="1" :imageStyles="imageStyles" @success="success"
					file-mediatype="image"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="是否显示logo" name="title" labelWidth="120">
				<switch :checked="header.isShow" class="switch" @change="switchChange" />
			</uni-forms-item>
			<uni-forms-item label="官网名称" name="title" labelWidth="120">
				<uni-easyinput v-model="header.name" placeholder="请设置应用或官网名称" />
			</uni-forms-item>
			<uni-forms-item label="字体颜色" name="nameColor" labelWidth="120">
				<view class="color-box">
					<input type="text" v-model="header.nameColor" placeholder="请选择官网名称字体颜色"
						class="color-value">
					<view class="color-border">
						<view @click="isOpenNameColor = !isOpenNameColor" class="color-show" :style="{'background':header.nameColor}">
							<uni-icons v-if="isOpenNameColor" type="top" size="25"></uni-icons>
							<uni-icons v-else type="bottom" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<v587-color-picker color="#ffffff" v-if="isOpenNameColor" v-model="header.nameColor" @onColorChange="pickerNameColor" class="color-picker" />
			</uni-forms-item>

			<uni-forms-item class="appIntroduce" label="设置tabbar" name="title" labelWidth="120">
				<view v-if="header.tabbar.length" v-for="(item,index) in header.tabbar" :key="index" class="content">
					<uni-easyinput class="easyinput" @input="input(index,$event)" :value="item"
						:placeholder="`请设置第${index+1}个tabbar,最多4个字`" maxlength="4" />
				</view>
			</uni-forms-item>
			<uni-forms-item label="tab字体颜色" name="tabColor" labelWidth="120">
				<view class="color-box">
					<input type="text" v-model="header.tabColor" placeholder="请设置tab字体颜色"
						class="color-value">
					<view class="color-border">
						<view @click="isOpenTabColor = !isOpenTabColor" class="color-show" :style="{'background':header.tabColor}">
							<uni-icons v-if="isOpenTabColor" type="top" size="25"></uni-icons>
							<uni-icons v-else type="bottom" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<v587-color-picker color="#ffffff" v-if="isOpenTabColor" v-model="header.tabColor" @onColorChange="pickerTabColor" class="color-picker" />
			</uni-forms-item>
			
			<uni-forms-item label="tab背景色" name="headerBackground" labelWidth="120">
				<view class="color-box">
					<input type="text" v-model="header.headerBackground" placeholder="请设置tab背景色"
						class="color-value">
					<view class="color-border">
						<view @click="isOpenHeaderBackground = !isOpenHeaderBackground" class="color-show" :style="{'background':header.headerBackground}">
							<uni-icons v-if="isOpenHeaderBackground" type="top" size="25"></uni-icons>
							<uni-icons v-else type="bottom" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<v587-color-picker color="#ffffff" v-if="isOpenHeaderBackground" v-model="header.headerBackground" @onColorChange="pickerHeaderBackground" class="color-picker" />
			</uni-forms-item>
			
			<uni-forms-item label="tab块标题字体颜色" name="titleColor" labelWidth="120">
				<view class="color-box">
					<input type="text" v-model="header.titleColor" placeholder="请设置tab块标题字体颜色"
						class="color-value">
					<view class="color-border">
						<view @click="isOpenTitleColor = !isOpenTitleColor" class="color-show" :style="{'background':header.titleColor}">
							<uni-icons v-if="isOpenTitleColor" type="top" size="25"></uni-icons>
							<uni-icons v-else type="bottom" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<v587-color-picker color="#ffffff" v-if="isOpenTitleColor" v-model="header.titleColor" @onColorChange="pickerTitleColor" class="color-picker" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" type="primary" @click="submitForm">保存</button>
	</view>
</template>

<script>
	const getconfigObj = uniCloud.importObject('getconfig', {
		loadingOptions: {
			title: '处理中...', // 显示的loading内的提示文字。默认值为：加载中...
			mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
		},
		errorOptions: { // 错误界面相关配置
			type: 'toast', // 错误信息展示方式，可取值：modal（弹框，默认）、toast（toast消息框）。默认值为：modal
			retry: false // 是否展示重试按钮，仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法，默认为false
		}
	})
	export default {
		data() {
			return {
				isOpenNameColor: false,
				isOpenTabColor: false,
				isOpenTitleColor: false,
				isOpenHeaderBackground:false,
				"header": {
					"logo": {
						url: '',
						extname: 'png',
						name: 'shuijiao.png'
					},
					"name": "网赚游戏",
					"nameColor":"#aaaaff",
					"tabbar": ["首页", "下载", "应用介绍", "公司简介", "联系我们"],
					"tabColor":"#ffffff",
					"titleColor":"#bfbfbf",
					"headerBackground":"#728af4",
					"isShow": true
				},
				imageStyles: {
					width: 120,
					height: 120,
					border: {
						radius: '10%'
					}
				},
			}
		},
		onLoad() {
			this.getData()
		},
		watch: {
			// 使用watch来响应数据的变化
			'header.nameColor'(newVal, oldVal) {
				if(!newVal){
					this.header.nameColor = oldVal
				}
			},
			'header.tabColor'(newVal, oldVal) {
				if(!newVal){
					this.header.tabColor = oldVal
				}
			},
			'header.titleColor'(newVal, oldVal) {
				if(!newVal){
					this.header.titleColor = oldVal
				}
			},
			'header.headerBackground'(newVal, oldVal) {
				if(!newVal){
					this.header.headerBackground = oldVal
				}
			}
		},
		methods: {
			pickerNameColor(e){
				this.header.nameColor = e
			},
			pickerTabColor(e){
				this.header.tabColor = e
			},
			pickerTitleColor(e){
				this.header.titleColor = e
			},
			pickerHeaderBackground(e){
				this.header.headerBackground = e
			},
			open() {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			getData() {
				getconfigObj.getConfig().then((res) => {
					// console.log("res:-----info ", res);
					this.header = res.data[0]
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			switchChange(e) {
				this.header.isShow = e.detail.value
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功', e)
				this.header.logo = e.tempFiles[0]
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			input(index, e) {
				console.log("index: ", index);
				this.header.tabbar[index] = e
			},
			submitForm() {
				
				var pattern = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
				
				if(!pattern.test(this.header.nameColor) || !pattern.test(this.header.tabColor) || !pattern.test(this.header.titleColor) || !pattern.test(this.header.headerBackground)){
					uni.showToast({
						title: '色值格式不正确，请重新选择或输入',
						icon:'error'
					});
					return false
				}
				
				getconfigObj.updateConfig({
					"_id": "header",
					...this.header
				}).then((res) => {
					// console.log("res:-----updateHeader ", res);
					if (res.updated) {
						uni.showToast({
							title: '更新成功！',
							icon: "none",
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '未提交更新内容！',
							icon: "none",
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log("err: ", err);
				})
			}
		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
		max-width: 460px;
	}

	.easyinput {
		margin-bottom: 20rpx;
	}

	.btn {
		width: 100px;
	}
	/deep/ .uni-forms-item__label[data-v-61dfc0d0]{
		width: 100px!important;
	}
	.switch{
		color: #aaafff;
	}

	.color-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.color-value {
		width:200px;
		background-color: #ffffff;
		height: 50px;
		line-height: 50px;
		padding-left: 20rpx;
		margin-right: 40rpx;
		border: #ddd solid 1px;
		border-radius: 10rpx;
	}

	.color-border {
		width: 50px;
		height: 50px;
		border: #ddd solid 2px;
		justify-content: center;
		align-items: center;
		display: flex
	}

	.color-show {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.color-picker {
		margin-left: 86rpx;
		margin-top: 20rpx;
	}
</style>
